/*
 * @Author: 黄宏智(HarryWong)
 * @Date: 2023-07-11 17:12:28
 * @LastEditors: 黄宏智(HarryWong)
 * @LastEditTime: 2023-09-11 14:04:11
 * @FilePath: /busienginewebsite/vite.config.ts
 * @Description:
 */
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
// import postCssPxToRem from 'postcss-pxtorem'
import postcsspxtoviewport from 'postcss-px-to-viewport'
import viteCompression from 'vite-plugin-compression' // 打包压缩gzip
import { visualizer } from 'rollup-plugin-visualizer' // 分析打包情况
// import viteImagemin from 'vite-plugin-imagemin' // 压缩图片

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    viteCompression(),
    // visualizer(),
    // viteImagemin({
    //   gifsicle: {
    //     optimizationLevel: 7,
    //     interlaced: false,
    //   },
    //   optipng: {
    //     optimizationLevel: 7,
    //   },
    //   mozjpeg: {
    //     quality: 20,
    //   },
    //   pngquant: {
    //     quality: [0.8, 0.9],
    //     speed: 4,
    //   },
    //   svgo: {
    //     plugins: [
    //       {
    //         name: 'removeViewBox',
    //       },
    //       {
    //         name: 'removeEmptyAttrs',
    //         active: false,
    //       },
    //     ],
    //   },
    // }),
    // inject({
    //   $: ['jquery', '*'],
    //   jQuery: 'jquery'
    // })
    Components({
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
      ],
      resolvers: [AntDesignVueResolver({ importStyle: 'less' })],
    }),
  ],
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px', // 要转化的单位
          viewportWidth: 1920, // UI设计稿的宽度
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ['*', '!font*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ['ant', 'container', 'siteFooter', 'siteHeader'], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
          exclude: [],
          landscape: false, // 是否处理横屏情况
        }),
      ],
    },
    preprocessorOptions: {
      less: {
        modifyVars: {
          'primary-color': '#5851a2',
          'border-radius-base': '4px',
          'layout-footer-background': '#040837',
          'layout-footer-padding': 0,
          'layout-header-background': '#fff',
          'layout-header-height': '68px',
          'layout-header-padding': 0,
        },
        javascriptEnabled: true,
      },
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@comp': fileURLToPath(new URL('./src/components', import.meta.url)),
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
  },
  build: {
    reportCompressedSize: false,
    sourcemap: false,
    chunkSizeWarningLimit: 1024, // chunk 大小警告的限制（单位kb）
    // commonjsOptions: {
    //   include: [],
    //   ignoreTryCatch: false
    // },
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        // manualChunks(id) {
        //   if (id.includes('node_modules')) {
        //     return id.toString().split('node_modules/')[1].split('/')[0].toString()
        //   }
        // },
        // chunkFileNames: chunkInfo => {
        //   const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : []
        //   const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]'
        //   return `js/${fileName}/[name].[hash].js`
        // },
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
      },
    },
  },
  server: {
    host: '0.0.0.0',
    port: 3000,
    open: true,
    https: false,
  },
})
